<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>       
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="${_resources}/logo.png"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">                                            
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />  
<%@ include file="/WEB-INF/jsp/common/inc.jsp" %>
<link rel="stylesheet" href="${_resources}bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="${_resources}bootstrap/bootstrap-table.min.css" />
<script type="text/javascript" src="${_resources}jquery-ui/jquery-ui-1.10.4.custom.min.js"></script>
<link rel="stylesheet" href="${_resources}jquery-ui/jquery-ui-1.10.4.custom.min.css" />
<title>批量导入用户</title>
<style type="text/css">
body{	
	overflow:hidden;
}
.file{margin-top:10px;}
.jbinformation .jbxinxi_span1{margin-left: 40%;position: absolute;}
.jbxinxi_input{width: 428px!important;}
.popup_down a{line-height: 20px;font-size: 13px;}
.popup_down a:hover{font-weight: 100;}
.permission_an a{margin: 5px 23px;}
.permission_an{height: 40px;}
</style>
<script type="text/javascript">

$(function (){
	$("#form").validationEngine({
		autoHidePrompt:true,//自动隐藏
		showOnMouseOver:true,//当鼠标移出时触发
		promptPosition:'bottomLeft',//提示信息的位置
		inlineValidation: true,//是否即时验证，false为提交表单时验证,默认true  
		failure : function() {
		    layer.message("验证失败，请检查");
			return false;  
		},//验证失败时调用的函数
		ajaxFormValidation: true,//开始AJAX验证
		success : function() {
		//	$("#addForm").submit();
		}//验证通过时调用的函数 
		//onAjaxFormComplete: ajaxValidationCallback
	});
	
});

//表单提交方法
function formSubmit(){
	var options = {
		dataType:"json",
		success:function(json){
			layer.closeAll('loading');
			if(json.code =="1"){
				layer.msg(json.message,{shift:5,time:1500},function(){
					parent.refreshTable();
					cancelAndClose();
				});
			}else{
				if(json.code=="0"){
					layer.msg(json.message);
				}
			}
		},
		error:function(json){
			layer.msg("系统错误,请联系管理员");
			//parent.closeWin();
		}
	};
	
	if($("#form").validationEngine('validate')){
		if(judgeFileType()){
			layer.load(2);
			$('#form').ajaxSubmit(options);	
		}
	}
	
}

function judgeFileType(){
	var fileType =$("#textfield").val();
	var typeMark =  fileType.substring(fileType.length-4,fileType.length);
	if(typeMark ==".xls"||typeMark ==".XLS"||(typeMark =="xlsx" &&fileType.indexOf("."))||(typeMark=="XLSX"&&fileType.indexOf("."))){
		return true;
	}else{
		layer.msg("请选择xls或xlsx文件！");  /* 字体显示大小写统一  */
		return false;
	}
}

//取消和关闭调用的方法
function cancelAndClose(){
	parent.closeWin();

}


</script>
</head>
<body>
<div style="padding-bottom:5px;margin-top:10px">
<form name="testFileFileUpload" id="form" action ="${_baseUrl}/userController/analysisExcl" method="post"  enctype="multipart/form-data" > 

<div  style="width:98%; margin:10px auto;">
    <table class="table table-bordered submenu_table">
      <tr>
      	<td height="50" width="15%" align="center"><span style="color: #f00">*</span> 上传excel文档</td>
        <td width="35%">
			<div class="upload">
			  <input class="upload_input" type="file" class="nav_input validate[required]" name=multipartfile id="textfield" >
			  <div class="upload_text"></div>
			  <div class="upload_text_a"></div>
			  <a class="upload_btn" href="javascript:;">上传</a>
			  <a class="upload_delete" href="javascript:;"></a>
			</div>
		</td>
      </tr>
    </table>
    <div class="popup_down">
		<a href="${_baseUrl}/userController/downloadExcl" style=" width:140px;padding-left:0px;">下载excel模板</a>       <!-- 修改文字 excel  --> 
	</div>
	<div class="permission_an mubanclass_an ma mt0">
		<shiro:hasPermission name="userController:analysisExcl">
			<a href="javascript:;" id="submit1" onclick="formSubmit()" class=" per_baocun">保 存</a>
		</shiro:hasPermission>
		<shiro:hasPermission name="typicalCase:close">
			<a href="javascript:;" class=" per_gbi" onclick="cancelAndClose();" >关 闭</a>
		</shiro:hasPermission>
	</div>	
</div>
	
</form>
</div>
</body>
<script type="text/javascript">
$(function(){
	$("input[type='file']").change( function() {
		var fileType =$("#textfield").val();
		 $(".upload_text").text(fileType);
		$(".upload_text").attr("title",fileType);
		$(".upload_delete").click(function(){
			$(".upload_text").val("");
			$(".upload_text").text("");
			$("#textfield").val("");
			$(".upload_text").attr("title","");
			});
		});
	})
</script>
</html>